<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// import { useUserStore } from '../stores/user.ts'
// 图标在模板中按字符串形式使用，无需在脚本导入

// const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 用户信息（当前未在侧栏展示，如需显示可用）
// const username = computed(() => userStore.username || '未登录')

// 菜单项
const menuItems = [
  { id: 'profile', title: '个人资料', icon: 'User', path: '/account/profile' },
  { id: 'address', title: '收货地址', icon: 'Location', path: '/account/address' },
]

// 当前激活的菜单
const activeMenu = computed(() => {
  const path = route.path
  const currentMenu = menuItems.find(item => path.includes(item.id))
  return currentMenu ? currentMenu.id : 'profile'
})

// 处理菜单点击
const handleMenuClick = (menuId: string) => {
  const menuItem = menuItems.find(item => item.id === menuId)
  if (menuItem) {
    router.push(menuItem.path)
  }
}
</script>

<template>
  <div class="account-sidebar">
    <div class="sidebar-menu">
      <div 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="menu-item"
        :class="{ active: activeMenu === item.id }"
        @click="handleMenuClick(item.id)"
      >
        <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>



<style scoped lang="scss">
.account-sidebar {
  width: 11rem; /* 收紧导航宽度，释放右侧空间 */
  background-color: transparent;
  overflow: hidden;
}
.sidebar-menu {
  padding: 0.425rem 0;
  
  .menu-item {
    padding: 0.1rem 1.25rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 0.625rem;
    font-size: 0.8rem;
    
    &:hover {
      background-image: linear-gradient(to right, #ff6a00, #ee0979);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    
    &.active {
      color: #ff6a00;
      font-weight: 600;
    }
    
    .el-icon {
      margin-right: 0.625rem;
      font-size: 1.625rem;
      
      &:deep(svg) {
        background-image: linear-gradient(to right, #ff6a00, #ee0979);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }
  }
}

/* 激活状态下图标同样显示橙色 */
.sidebar-menu .menu-item.active .el-icon {
  color: #ff6a00;
  
  &:deep(svg) {
    background-image: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #ff6a00;
  }
}
</style>
